<mat-card>
  <mat-toolbar-row>
    <h3>{{ 'Interfaces' | translate }}</h3>
    <div class="actions">
      <div [matTooltip]="isHaLicensed() ? (helptext.haEnabledEditMessage | translate) : ''">
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          [ixTest]="['add', 'interface']"
          [disabled]="isHaLicensed()"
          [ixUiSearch]="searchableElements.addInterface"
          (click)="onAddNew()"
        >
          {{ 'Add' | translate }}
        </button>
      </div>
    </div>
  </mat-toolbar-row>
  <ix-table class="interfaces-table" [ixUiSearch]="searchableElements.interfaces">
    <thead
      ix-table-head
      [columns]="columns"
      [dataProvider]="dataProvider"
    ></thead>
    <tbody
      ix-table-body
      [columns]="columns"
      [dataProvider]="dataProvider"
      [isLoading]="isLoading"
    >
      <ng-template
        let-interface
        ix-table-cell
        [columnIndex]="0"
        [dataProvider]="dataProvider"
      >
        <ix-interface-status-icon [update]="inOutUpdates()[interface.name]"></ix-interface-status-icon>
      </ng-template>
    </tbody>
  </ix-table>
</mat-card>
